import React, { useEffect, useState } from 'react'

/* 引入antd */
import { Input, Select, Button, Form, InputNumber, DatePicker } from 'antd';
/* 引入上下文 */
import useStore from '../../../context/useStore';
import {useHistory} from 'react-router-dom'
import { useObserver } from 'mobx-react-lite';

const { Option } = Select;
const AddQuestions: React.FC = () => {

  const { questions, exam } = useStore();

  const [subject_id,setSubId]=useState<string>('') 
  const [exam_id,setExamId]=useState<string>('') 
  const [title,setTitle]=useState<string>('') 
  const [number,setNum]=useState<number>(0) 
  const [start_time,setStartTime]=useState<number>(0) 
  const [end_time,setEndTime]=useState<number>(0) 



  useEffect(() => {
    /* 获取所有的试题类型 */
    questions.getExamTypeAction();
    /* 获取所有的课程 */
    questions.getSubjectListAction();
  }, [questions,exam])

  /* 标题内容 */
  function TiMu(e: any) {
   /*  console.log(e.target.value); */
   setTitle(e.target.value)
  }

  /* 考试类型 */
  function handleChangeExam(value: string) {
    /* console.log(`selected ${value}`); */
    console.log('类型。。。。',value);
    setExamId(value)
  }
  /* 课程类型 */
  function handleChangeSub(value: string) {
    /* console.log(`selected ${value}`); */
    console.log('课程。。。。',value);
    setSubId(value)
  }

  /* 调用开始添加试题接口方法 */
  let history=useHistory()
  function getsAddExam() {
    /* console.log('getsAddQuestion...',params); */
    
    let data=exam.getConsumerListAction({subject_id,exam_id,title,number,start_time,end_time});
    if(data){
      history.push('/home/paperDetail')
    }
    console.log(data);
    
  }
  const onFinish = (values: any) => {
    console.log(values);
  };
  /* 样式布局 */
  const layout = {
    labelCol: { span: 2 },
    wrapperCol: { span: 16 },
  };

  /* 验证 */
    // const [number, setNumber] = useState({
    //   value: 4,
    // });
  
    const onNumberChange = (value: any) => {
      console.log(value);
      setNum(value)
    };
  const kaiTime=(value: any)=>{
    let Time=new Date(value).getTime()
    setStartTime(Time)
    console.log(new Date(value).getTime());
  }
  const jieTime=(value: any)=>{
    let Time=new Date(value).getTime()
    setEndTime(
      Time
    )
    console.log(new Date(value).getTime());
    
  }
  return useObserver(() => <div>
    <h2>添加考试</h2>
    <div className='main'>
      <p>*添加题目</p>
      <Form {...layout} name="nest-messages" onFinish={onFinish} >
        <Form.Item name={['user', 'title']} rules={[{ message: '请输入试卷名称!' }]} >
          <Input placeholder="请输入试卷名称，不超过20个字" onChange={TiMu} />
        </Form.Item>

        <p>*选择考试类型：</p>
        {/* <Form.Item
          name="select"
          rules={[{ required: true, message: '选择考试类型!' }]}
        > */}

          <Select style={{ width: 120 }} onChange={handleChangeExam}>
            {
              questions.examTypeList.map((item: any) => {
                /* console.log('考试类型。。', item); */
                return <Option value={item.exam_id} key={item.exam_id}>{item.exam_name}</Option>
              })
            }
          </Select>
       {/*  </Form.Item>
 */}
        <p>*选择课程类型：</p>
        <Form.Item
          name="select"
          rules={[{ required: true, message: '选择课程类型!' }]}
        >
          <Select style={{ width: 120 }} onChange={handleChangeSub}>
            {
              questions.subjectList.map((item: any) => {
                /*  console.log('课程类型。。。', item); */
                return <Option value={item.subject_id} key={item.subject_id}>{item.subject_text}</Option>
              })
            }
          </Select>
        </Form.Item>
        <p>*设置题量</p>
        <Form.Item>
        <InputNumber min={4}   onChange={onNumberChange} />
      </Form.Item>
      
      <Form.Item style={{ marginBottom: 0 }}>
        <DatePicker onChange={kaiTime}/>
      <span
        style={{ display: 'inline-block', width: '10px', lineHeight: '32px', textAlign: 'center' }}
      >
        -
      </span>
      
        <DatePicker onChange={jieTime}/>
      
    </Form.Item>
        <Form.Item style={{ marginTop: 20 }} >
          <Button type="primary" onClick={getsAddExam}>创建</Button>
        </Form.Item>
      </Form>
    </div>
  </div>
  )
}
export default AddQuestions;